<template>
  <v-app>
    <!-- 主要内容区 -->
    <v-sheet color="transparent" class="w-[90%] mx-auto pt-[90px] pb-12">
      <v-row>
        <!-- 左侧筛选栏 - 移动端默认隐藏，通过按钮控制显示 -->
        <!-- 移动端筛选按钮 -->
        <!-- <v-btn
          class="md:hidden mb-4 bg-[#413E3A] text-white"
          @click="showFilters = !showFilters"
        >
          <v-icon left>mdi-filter</v-icon>
          Filters
        </v-btn> -->

        <!-- 筛选面板 - 移动端显示/隐藏切换 -->
        <!-- <v-sheet
          v-if="showFilters"
          color="white"
          class="md:hidden mb-6 p-4 rounded-lg shadow-md"
        >
          <mobile-filters />
        </v-sheet> -->

        <!-- 桌面端筛选栏 -->
        <v-col md="3" cols="12" class="hidden md:block">
          <v-sheet color="white" class="sticky top-4 p-4 rounded-lg shadow-sm">
            <desktop-filters @on-filters="handleFiltersChange" />
          </v-sheet>
        </v-col>

        <!-- 右侧商品列表 -->
        <v-col md="9" cols="12">
          <!-- 排序和视图切换 -->
          <v-row class="mb-6 items-center justify-between">
            
            <v-col md="6" cols="12" class="d-flex justify-between items-center">
              <!-- <v-select
                v-model="sortBy"
                :items="sortOptions"
                dense
                outlined
                hide-details
                class="w-[60%] text-sm"
              ></v-select> -->
              <!-- <div class="w-[60%]"></div> -->
              <!-- <v-btn-toggle v-model="viewMode" dense group>
                <v-btn icon :value="'grid'">
                  <v-icon>mdi-grid</v-icon>
                </v-btn>
                <v-btn icon :value="'list'">
                  <v-icon>mdi-view-list</v-icon>
                </v-btn>
              </v-btn-toggle> -->
            </v-col>
            <v-col md="6" cols="12" class="d-flex justify-end items-center">
              <p class="text-[#999] text-sm">
                Showing <span class="text-[#413E3A] font-medium">{{ products.length }}</span> of
                <span class="text-[#413E3A] font-medium">{{ searchParams.totalCount }}</span> products
              </p>
            </v-col>
          </v-row>

          <!-- 网格视图商品列表 -->
          <v-row v-if="viewMode === 'grid'">
            <product-card
              v-for="(product, index) in products"
              :key="index"
              :product="product"
            />
          </v-row>

          <!-- 列表视图商品列表 -->
          <v-list v-else class="space-y-4">
            <v-list-item
              v-for="(product, index) in products"
              :key="index"
              class="border rounded-lg overflow-hidden"
            >
              <v-list-item-avatar class="md:w-32 md:h-32">
                <v-img
                  :src="product.imgurl[0] ? product.imgurl[0] : ''"
                  class="object-contain"
                ></v-img>
              </v-list-item-avatar>
              <v-list-item-content class="flex-1">
                <v-list-item-title class="text-[#413E3A] font-semibold">
                  {{ product.name }}
                </v-list-item-title>
                <v-list-item-subtitle class="text-blue">
                  {{ product.specs }}
                </v-list-item-subtitle>
                <v-list-item-subtitle class="text-[#999] text-sm mt-1">
                  {{ product.weight }}
                </v-list-item-subtitle>
              </v-list-item-content>
              <v-list-item-action
                class="flex flex-column justify-center items-end pr-4"
              >
                <div class="text-[#333] text-lg">
                  USD: <span class="text-blue font-bold">{{ product.price }}</span>
                </div>
                <v-btn class="mt-2 bg-[#413E3A] text-white" size="sm">
                  Customize
                </v-btn>
              </v-list-item-action>
            </v-list-item>
          </v-list>

          <!-- 分页 -->
          <v-row v-if="searchParams.pageCount > 0" class="mt-8 justify-center">
            <v-pagination
              v-model="searchParams.page"
              :length="searchParams.pageCount"
              :total-visible="5"
              circle
              @update:modelValue="handlePageChange"
            ></v-pagination>
          </v-row>
        </v-col>
      </v-row>
    </v-sheet>
  </v-app>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import ProductCard from "./product-card.vue";
import DesktopFilters from "./desktop-filters.vue";
// import MobileFilters from "./mobile-filters.vue";
const {locale, setLocale, tm} = useI18n()
const seo_title = computed(() => {
  return tm("shop.seo.title");
})
const seo_ogTitle = computed(() => {
  return tm("shop.seo.ogTitle");
})
const seo_description = computed(() => {
  return tm("shop.seo.description");
})
const seo_ogDescription = computed(() => {
  return tm("shop.seo.ogDescription");
})

// SEO 会根据中英文切换做不同的SEO
useSeoMeta({
  title: seo_title,
  ogTitle: seo_ogTitle,
  description: seo_description,
  ogDescription: seo_ogDescription,
  ogImage: 'https://oss-cdn.tearful.cn/shop/banner/AP_memorial_day_sale_BANNERSv2-01_2048x2048.webp'
})


const { $axios } = useNuxtApp();

const SEARCH_PARAMS = {
  query: "",
  cid: [],
  page: 1,
  pageSize: 9,
  pageCount: 0,
  totalCount: 0,
};

const searchParams = ref<any>({ ...SEARCH_PARAMS });

const showFilters = ref(false);
const viewMode = ref("grid");
const products = ref<any[]>([]);

const search = async () => {
  const { query, cid, page, pageSize } = searchParams.value;
  const { code, data } = await $axios.get(
    `/getProductList?query=${query}&cid=${cid}&page=${page}&pageSize=${pageSize}`
  );
  if (code === "200") {
    products.value = data.dataList;
    searchParams.value.pageCount = data.pageCount;
    searchParams.value.totalCount = data.totalCount;
    console.log("获取数据成功 => ", searchParams.value);
  }
}

const handleFiltersChange = (filters: any) => {
  searchParams.value.cid = filters.value.map((item: any) => item.cid).join(",");
  searchParams.value.page = 1;
  search();
}

const handlePageChange = (page: number) => {
  searchParams.value.page = page;
  search();
}

onMounted(() => {
  search();
});

</script>